<template>
	<view>
		<canvas :id="cid" :canvas-id="cid" :style="{width: `${size}px`, height: `${size}px`}" />
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'

	export default {
		name: 'UniQrcode',
		props: {
			cid: {
				type: String,
				required: true
			},
			text: {
				type: String,
				required: true
			},
			size: {
				type: Number,
				default: 129
			},
			margin: {
				type: Number,
				default: 0
			},
			backgroundColor: {
				type: String,
				default: '#ffffff'
			},
			foregroundColor: {
				type: String,
				default: '#000000'
			},
			backgroundImage: {
				type: String
			},
			logo: {
				type: String
			},
			makeOnLoad: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				filePath: ''
			}
		},
		mounted() {
			if (this.makeOnLoad) {
				this.make()
			}
		},
		methods: {
			make() {
				var options = {
					canvasId: this.cid,
					componentInstance: this,
					text: this.text,
					size: this.size,
					margin: this.margin,
					backgroundColor: this.backgroundColor,
					foregroundColor: this.foregroundColor,
					success: res => {
						this.filePath = res
						this.makeComplete()
					}
				}

				if (this.backgroundImage) {
					options.backgroundColor = 'rgba(255,255,255,0)'
					options.success = res => {
						this.drawBackgroundImage(res)
					}
				}

				if (this.logo) {
					options.backgroundColor = 'rgba(255,255,255,0)'
					options.success = res => {
						this.drawLogo(res)
					}
				}

				uQRCode.make(options)
			},
			makeComplete() {
				this.$emit('makeComplete', this.filePath)
			},
			drawBackgroundImage(qrcode) {
				var ctx = uni.createCanvasContext(this.cid, this)

				ctx.drawImage(this.backgroundImage, 0, 0, this.size, this.size)

				ctx.drawImage(qrcode, 0, 0, this.size, this.size)

				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: this.cid,
						success: (res) => {
							this.filePath = res.tempFilePath
						}
					})
				})
			},
			drawLogo(qrcode) {
				var ctx = uni.createCanvasContext(this.cid, this)

				ctx.drawImage(qrcode, 0, 0, this.size, this.size)

				var logoSize = this.size / 4
				var logoX = this.size / 2 - logoSize / 2
				var logoY = logoX

				var borderSize = logoSize + 10
				var borderX = this.size / 2 - borderSize / 2
				var borderY = borderX
				var borderRadius = 5
				
				this.fillRoundRect(ctx, borderRadius, borderX, borderY, borderSize, borderSize)
				
				ctx.drawImage(this.logo, logoX, logoY, logoSize, logoSize)

				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: this.cid,
						success: (res) => {
							this.filePath = res.tempFilePath
						}
					})
				})
			},
			fillRoundRect(ctx, r, x, y, w, h) {
				ctx.save()
				ctx.translate(x, y)
				ctx.beginPath()
				ctx.arc(w - r, h - r, r, 0, Math.PI / 2)
				ctx.lineTo(r, h)
				ctx.arc(r, h - r, r, Math.PI / 2, Math.PI)
				ctx.lineTo(0, r)
				ctx.arc(r, r, r, Math.PI, Math.PI * 3 / 2)
				ctx.lineTo(w - r, 0)
				ctx.arc(w - r, r, r, Math.PI * 3 / 2, Math.PI * 2)
				ctx.lineTo(w, h - r)
				ctx.closePath()
				ctx.setFillStyle('#ffffff') 
				ctx.fill()
				ctx.restore()
			}
		}
	}
</script>
